<wide-header-page title="{{'Address Book'|translate}}">
  <ion-buttons *ngIf="!isEmptyList" right>
    <button clear wide-header-bar-button (click)="addEntry()" ion-button>
      <span translate>New contact</span>
    </button>
  </ion-buttons>
  <div page-content>
    <search-bar *ngIf="!isEmptyList && !migratingContacts" [scrollArea]="wideHeaderPage?.scrollArea" (search)="getItems($event)" placeholder="{{'Search a contact' | translate}}"></search-bar>
    <div class="zero-state" *ngIf="isEmptyList">
      <ion-icon class="zero-state-icon">
        <img class="svg" src="assets/img/address-book-add.svg" />
      </ion-icon>
      <div class="zero-state-heading" translate>No contacts yet</div>
      <div class="zero-state-description" translate>Get started by adding your first one.</div>
      <button ion-button class="button-standard" (click)="addEntry()">
        {{'New contact' | translate}}
      </button>
    </div>

    <ion-list class="bp-list" margin-top>
      <button ion-item *ngFor="let entry of (filteredAddressbook | async)" (click)="viewEntry(entry)">
        <ion-icon item-start>
          <gravatar [name]="entry.name" [height]="40" [width]="40" [email]="entry.email" [coin]="entry.coin" [network]="entry.network"></gravatar>
        </ion-icon>
        <div class="item-title">{{ entry.name }}</div>
        <div class="item-subtitle">{{ entry.address }}</div>
      </button>
    </ion-list>
  </div>
</wide-header-page>